<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>房源信息查询</title>
</head>
<body>
<h1>房屋信息查询</h1>
<a href="/add">发布房源</a>
<form id="searchForm">
<input type="hidden" value="1" name="startPageNo"/>
<input type="hidden" value="" name="houseType.typeId"/>
</form>
<table border="1" width="800" cellspacing="0">
    <thead>
    <tr>
        <th>序号</th>
        <th>描述</th>
        <th>户型</th>
        <th>租金</th>
        <th>发布时间</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
<div id="paging">
    <a href="javascript:pageNav(1);">首页</a>&nbsp;&nbsp;
    <a href="javascript:pageNav(1);">上一页</a>&nbsp;&nbsp;
    <a href="javascript:pageNav(1);">下一页</a>&nbsp;&nbsp;
    <a href="javascript:pageNav(1);">末页</a>&nbsp;&nbsp;
    第1页/共10页
</div>
<script type="text/javascript" th:src="@{/jquery-3.7.1.js}"></script>
<script type="text/javascript">
    $(function(){
        var params = window.location.search.substring(1);
        console.log(params);
        if (params) {
            // 有参数
            var id = params.split("&")[0].split("=")[1];
            $("input[name^=houseType]").val(id);
        } else {
            // 没有参数
            $("input[name^=houseType]").val('')
        }
        loadTableData();
    });

    function loadTableData(){
        $.getJSON("/houseInfo", $("#searchForm").serialize(), function(res){
            console.log(res);
            var strTbody = '';
            var data = res['data'];
            for (var i = 0; i < data.length; i++) {
                strTbody += '<tr>' +
                    '        <td>'+data[i]['houseId']+'</td>' +
                    '        <td>'+data[i]['houseDesc']+'</td>' +
                    '        <td><a href="/index?typeId='+data[i]['houseType']['typeId']+'">'+data[i]['houseType']['typeName']+'</a></td>' +
                    '        <td>'+data[i]['monthlyRent']+'元/月</td>' +
                    '        <td>'+data[i]['publishDate']+'</td>' +
                    '    </tr>';
            }
            $("tbody").html(strTbody);
            var strPaging = '';
            var currentPageNo = res['currentPageNo'];
            var totalPageCount = res['totalPageCount'];
            if (currentPageNo > 1) {
                strPaging += '<a href="javascript:pageNav(1);">首页</a>&nbsp;&nbsp;' +
                    '    <a href="javascript:pageNav('+(currentPageNo - 1)+');">上一页</a>&nbsp;&nbsp;';
            } else {
                strPaging += '<a href="javascript:;">首页</a>&nbsp;&nbsp;' +
                    '    <a href="javascript:;">上一页</a>&nbsp;&nbsp;';
            }
            if (currentPageNo < totalPageCount) {
                strPaging += '<a href="javascript:pageNav('+(currentPageNo + 1)+');">下一页</a>&nbsp;&nbsp;' +
                    '    <a href="javascript:pageNav('+totalPageCount+');">末页</a>&nbsp;&nbsp;';
            } else {
                strPaging += '<a href="javascript:;">下一页</a>&nbsp;&nbsp;' +
                    '    <a href="javascript:;">末页</a>&nbsp;&nbsp;';
            }
            strPaging += '第'+currentPageNo+'页/共'+totalPageCount+'页';
            $("#paging").html(strPaging);
        });
    }

    function pageNav(pageNo) {
        $("input[name=startPageNo]").val(pageNo);
        loadTableData();
    }
</script>
</body>
</html>